<template>
    <!-- 使用Element Plus的el-descriptions组件展示店铺信息 -->
    <el-descriptions class="margin-top" title="店铺信息" :column="1" :size="size" border>
        <!-- 显示店铺名称 -->
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <user />
                    </el-icon>
                    店铺名称
                </div>
            </template>
            {{ store?.store_name }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <iphone />
                    </el-icon>
                    店铺ID
                </div>
            </template>
            <!-- 显示店铺的名称，如果store存在就显示其store_name属性 -->
            {{ store?.id }}
        </el-descriptions-item>
        <!-- 显示店铺地址 -->
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <location />
                    </el-icon>
                    店铺地址
                </div>
            </template>
            <!-- 显示店铺地址，如果store存在就显示其address属性 -->
            {{ store?.address }}
        </el-descriptions-item>
        <!-- 显示店铺外卖数量 -->
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <aim />
                    </el-icon>
                    店铺外卖
                </div>
            </template>
            <!-- 显示店铺外卖数量，如果store存在就显示其takeout_count属性 -->
            {{ store?.takeout_count }}
        </el-descriptions-item>
        <!-- 显示创建时间 -->
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <clock />
                    </el-icon>
                    创建时间
                </div>
            </template>
            <!-- 显示创建时间，如果store存在就显示其create_time属性 -->
            {{ store?.create_time }}
        </el-descriptions-item>
        <!-- 判断是否通过认证 -->
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <aim />
                    </el-icon>
                    是否通过认证
                </div>
            </template>
            <!-- 根据store的state属性判断是否通过认证，1表示通过，其他表示未通过 -->
            {{ store?.state === 1 ? "是" : "否" }}
        </el-descriptions-item>
        <!-- 展示店铺描述 -->
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <edit-pen />
                    </el-icon>
                    店铺描述
                </div>
            </template>
            <!-- 显示店铺描述，如果store存在且有introduce属性则显示其内容，否则显示“暂无描述信息” -->
            {{ store?.introduce ? store?.introduce : '暂无描述信息' }}
        </el-descriptions-item>
    </el-descriptions>
</template>

<script setup lang="ts">
// 导入Vue的onMounted和ref函数
import { onMounted, ref } from 'vue'
// 从Element Plus中导入图标
import {
    Iphone,
    Location,
    Clock,
    EditPen,
    Aim,
    User
} from '@element-plus/icons-vue'
// 导入Element Plus的类型定义
import type { ComponentSize } from 'element-plus'
// 导入用户信息存储模块
import { userInfoStore } from '../assets/userStore/userStore';
// 导入店铺模型定义
import { StoreModel } from '../assets/models/Store';
// 导入店铺API模块
import { storeApis } from '../assets/apis/StoreApis';

// 获取用户信息存储实例，用于访问当前用户的ID等信息
const userStore = userInfoStore()
// 定义组件大小为大号，用于控制el-descriptions组件的大小
const size = ref<ComponentSize>('large')
// 定义一个响应式引用，用于存储查询到的店铺信息数据
const store = ref<StoreModel>();

// 在组件挂载后执行查询店铺信息的API调用
onMounted(() => {
    // 根据用户ID查询店铺信息，调用storeApis模块中的queryStore方法
    storeApis.queryStore(userStore.id)
        // 成功回调，将结果赋值给store变量，result类型为StoreModel
        .then((reslut: StoreModel) => {
            // 将查询到的店铺信息赋值给store变量，以便在模板中使用
            store.value = reslut
        })
})
</script>

<style scoped>
.el-descriptions {
    margin-top: 20px;
}

.cell-item {
    display: flex;
    align-items: center;
}

.margin-top {
    margin-top: 20px;
}
</style>
